<template>
 <div style="width: 100vw;height: 100vh;">

   <div v-if="data.loginedUserInfo==undefined" style="width: 100vw;height: 100vh;background-position: center;background-repeat: no-repeat;background-size: cover;background-image: url('https://api.dujin.org/bing/1920.php');background-color: rgb(242,242,242);">

    <div style="width: 100vw;height: 100vh;background-color: rgba(0,0,0,0.3);backdrop-filter: blur(0px);padding-left: 50vw;padding-top: 50vh;backdrop-filter: blur(20px);">
            <div style="position: fixed;width: 100vw;bottom: 15px;text-align: center;color: white;left: 0;font-size: 20px;">
                志愿助手
            </div>

      <div style="width: 300px;transform: translate(-50%,-50%);text-align: center;">

        <p style="font-size: 24px;color: white;margin-bottom: 15px;font-weight: bold;margin-bottom: 30px;">管理员登录</p>
        <div style="width: 100%;padding: 2px 2px;background-color: rgb(255,255,255,0.3);backdrop-filter: blur(20px);border-radius: 5px;margin-bottom: 10px;border-bottom: 2px solid rgb(0,120,215);padding-bottom: 0; ">
          <a-input v-model="data.account" :disabled="data.isLogining" allow-clear style="width: 100%;height: 35px;border-radius: 5px;border: 0;background-color: rgba(0,0,0,0.8);color: white;" placeholder="账号"></a-input>
        </div>
        
        <div style="width: 100%;padding: 2px 2px;background-color: rgb(255,255,255,0.3);backdrop-filter: blur(20px);border-radius: 5px;margin-bottom: 20px;border-bottom: 2px solid rgb(0,120,215);padding-bottom: 0; ">
          <a-input v-model="data.password" :disabled="data.isLogining" allow-clear type="password" style="width: 100%;height: 35px;border-radius: 5px;border: 0;background-color: rgba(0,0,0,0.8);color: white;" placeholder="密码"></a-input>
        </div>
        
        <p v-if="data.warningText!=''" style="margin-bottom: 15px;color: white;text-align: center;">{{ data.warningText }}</p>
        <p style="text-align: center;">
          <span style="backdrop-filter: blur(20px);border-radius: 5px;">
            <!-- <a-button class="login-button" :loading="data.isLogining" type="primary" style="font-size: 14px;padding: 0 30px;" @click="login">登录</a-button> -->
            <div class="button" style="color: white;" @click="login">
                        登录
                    </div>
          </span>
          
        </p>

      </div>

    </div>
    
   </div>

   <div v-if="data.loginedUserInfo!=undefined" style="width: 100vw;height: 100vh;">

    <a-layout class="layout-demo">
    <a-layout-sider :collapsed="false">
      <div style="padding: 20px 20px;text-align: center;font-size: 20px;color: dimgray;">
        志愿助手后台
      </div>
      <a-menu
        :default-open-keys="['1']"
        :default-selected-keys="[data.siderDefaultSelectedKey]"
        :style="{ width: '100%' }"
        @menu-item-click="onClickMenuItem"
        v-if="data.showSider"
      >
        <a-menu-item :key="1">
          首页
        </a-menu-item>
        <a-menu-item :key="2">
          账号管理
        </a-menu-item>
        <a-menu-item :key="3">
          院校管理
        </a-menu-item>
        <a-menu-item :key="4">
          专业管理
        </a-menu-item>
        <a-menu-item :key="5">
          专业目录管理
        </a-menu-item>
        <a-menu-item :key="6">
          城市管理
        </a-menu-item>
        <a-menu-item :key="7">
          一分一段表管理
        </a-menu-item>
        <a-menu-item :key="9">
          VIP卡管理
        </a-menu-item>
        <a-menu-item :key="8">
          系统设置
        </a-menu-item>
      </a-menu>
      <!-- trigger -->
      <template #trigger="{ collapsed }">
        <IconCaretRight v-if="collapsed"></IconCaretRight>
        <IconCaretLeft v-else></IconCaretLeft>
      </template>
    </a-layout-sider>
    <a-layout>
      <RouterView :change-sider-selected-key="changeSiderSelectedKey" style="width: 100%;height: 100vh;"></RouterView>
    </a-layout>
  </a-layout>
    
   </div>

 </div>
</template>

<script>
import { defineComponent } from 'vue'
import {
  IconCaretRight,
  IconCaretLeft,
} from '@arco-design/web-vue/es/icon'
import sha256 from 'sha256'
import axios from 'axios'
import router from '@/utils/router'
// axios.defaults.baseURL="http://127.0.0.1:3000"

export default defineComponent({
  components: {
    IconCaretRight,
    IconCaretLeft,
  },
  data(){
    return{
        data:{
            loginedUserInfo:undefined,
            isLogining:false,
            password:'',
            account:'',
            warningText:'',
            siderDefaultSelectedKey:1,
            showSider:true,
        }
    }
  },
  methods: {
    changeSiderSelectedKey(key){
      this.data.showSider=false;
      this.data.siderDefaultSelectedKey=key;
      setTimeout(() => {
        this.data.showSider=true;
      }, 1);
    },
    login(){
      if(this.data.account==''){
        this.data.warningText='请输入账号';
        return;
      }
      if(this.data.password==''){
        this.data.warningText='请输入密码';
        return;
      }
      this.data.warningText='';
      this.data.isLogining=true;
      
      var config = {
   method: 'post',
   url: '/api/v1/admin/login?account='+this.data.account+'&password=' + sha256(this.data.password),
   headers: { 
      'Content-Type': 'application/json', 
      'Accept': '*/*', 
   }
};

axios(config)
.then((res) => {
   this.data.isLogining=false;
   if(res.data.status==1){
    this.data.loginedUserInfo={
      account:this.data.account,
    }
    this.data.account='';
    this.data.password='';
   }
   if(res.data.status==0){
    this.data.warningText=res.data.content;
   }
   if(res.data.status==2){
    this.data.warningText=res.data.content;
   }
})
    },
    onClickMenuItem(key) {
      switch (key) {
        case 1:
          router.push('/background');
          break;
        case 2:
          router.push('/backgroundStudent');
          break;
        case 3:
          router.push('/backgroundUniversity');
          break;
        case 4:
          router.push('/backgroundMajor');
          break;
        case 5:
          router.push('/backgroundNews');
          break;
        case 6:
          router.push('/backgroundCity');
          break;
        case 7:
          router.push('/backgroundScoreranking');
          break;
        case 8:
          router.push('/backgroundSystem');
          break;
        case 9:
          router.push('/backgroundVip');
          break;
      }
    }
  }
});
</script>

<style scoped>

.login-button:active{
  scale: 0.99;
}

.login-button:hover{
  background-color: rgba(255,255,255,0.2);
}

.login-button{
  padding: 15px 30px;
  border-radius: 5px;
  background-color: rgba(255,255,255,0.1);
  backdrop-filter: blur(20px);
  transition: all .1s;
  font-size: 14px;
  height: 35px;
}
.layout-demo {
  height: 100vh;
  background: var(--color-fill-2);
  border: 1px solid var(--color-border);
}
.layout-demo :deep(.arco-layout-sider) .logo {
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-size: 14px;
  margin: 12px 8px;
  background: rgba(255, 255, 255, 0.2);
  color:gray;
}
.layout-demo :deep(.arco-layout-sider-light) .logo{
  background: var(--color-fill-2);
}
.layout-demo :deep(.arco-layout-header)  {
  height: 64px;
  line-height: 64px;
  background: var(--color-bg-3);
}
.layout-demo :deep(.arco-layout-footer) {
  height: 48px;
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  line-height: 48px;
}
.layout-demo :deep(.arco-layout-content) {
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  background: var(--color-bg-3);
}
.layout-demo :deep(.arco-layout-footer),
.layout-demo :deep(.arco-layout-content)  {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-white);
  font-size: 16px;
  font-stretch: condensed;
  text-align: center;
}

.button{
    border-radius: 5px;
    background-color: rgba(255,255,255,0.2);
    transition: all .1s;
    display: inline-block;
    padding: 10px 35px;
    backdrop-filter: blur(20px);
}

.button:hover{
    background-color: rgba(255,255,255,0.3);
}

.button:active{
    scale: 0.99;
}
</style>